import React, {Component} from "react";

export default class Compare extends Component{
    // constructor(){
    //     super();
    //     this.state={
    //         supportNum:0,
    //         objectNum:0,
    //         abandonNum:0
    //     }
    // }

    //! 状态简写
    //! 相当于增加一个实例属性
    state={
        supportNum:0,
        objectNum:0,
        abandonNum:0
    }
    //! 第一种形式
    // support=(e)=>{
    //     //!参数事件对象
    //     console.log(e.clientX);
    //     this.setState({supportNum:this.state.supportNum+1,})
    // }
    // object=()=>{
    //     this.setState({objectNum:this.state.objectNum+1})
    // }
    // abandon=()=>{
    //     this.setState({abandonNum:this.state.abandonNum+1})
    // }
    
    //!第二种形式 
    // handleClick=(type)=>{
    //     //! handleClick=(type,e)=>{ //? 如果想要用事件对象，这里也需要加上形参e
    //     console.log(type)
    //                 //!type是变量，不能直接写type，要写成中括号
    //     this.setState({[type]:this.state[type]+1})
    // }


    //!第三种形式
    curryClick=(type)=>{
        // console.log(type)
        //! 函数返回一个函数，闭包，所以能得到type 
        return (e)=>{
            console.log(e)
            this.setState({[type]:this.state[type]+1})
        }
        
    }

    
    render(){
        // console.log(this);// 返回Compare对象实例
        
        const {supportNum,objectNum,abandonNum}=this.state
        let percent=supportNum/(supportNum+objectNum);
        if(isNaN(percent)){
            percent=0;
        }else{
            percent=(percent*100).toFixed(2);
        }
        return(
            <div>
                <h2>{this.props.title}</h2>
                <p>支持人数：{supportNum}</p>
                <p>反对人数：{objectNum}</p>
                <p>弃权人数：{abandonNum}</p>
                <p>支持率：{percent}%</p>
                <div>
                    {/* //! 第三种绑定方式 */}
                    <button onClick={this.curryClick('supportNum')}>支持</button>
                    <button onClick={this.curryClick('objectNum')}>反对</button>
                    <button onClick={this.curryClick('abandonNum')}>放弃</button>

                    {/* //!第二种绑定方式 */}
                                    {/* 只是声明没有调用，点击之后才会调用 */}
                                    {/* 外面调用的函数才是事件处理函数，里面的是普通函数，
                                    如果不加上箭头函数调用，那么页面加载执行一次后，普通函数执行返回undefined值 */}
                    {/* <button onClick={()=>this.handleClick('supportNum')}>支持</button> */}
                    {/* 
                        
                        <button onClick={(e)=>this.handleClick('supportNum',e)}>支持</button>
                        // 如果想用事件对象要这样写
                    
                    */}
                    {/* <button onClick={()=>this.handleClick('objectNum')}>反对</button>
                    <button onClick={()=>this.handleClick('abandonNum')}>放弃</button> */}

                    {/* //! 第一种绑定方式 */}
                    {/* <button onClick={this.support}>支持</button>
                    <button onClick={this.object}>反对</button>
                    <button onClick={this.abandon}>放弃</button> */}
                </div>
            </div>
        )
    }
}

//! 函数柯里化：将一个接收多个参数的函数，
//! 变换成只接收单一参数并且返回一个接收其余参数的函数且进行计算处理的函数的一种技术
const add2=(a,b,c)=>{
    return a+b+c;
}
const add=(a)=>{
    return (b)=>{
        return (c)=>{
            return a+b+c;
        }
    }
}
// 箭头函数简写
// const add=a=>b=>c=>a+b+c;
console.log(add(1)(2)(3));
console.log(add2(1,2,3))

//! 高阶函数：接收一个函数作为参数，或者返回一个函数作为输出的函数
// map filter forEach 

